<template>
  <div id="daily"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      array: []
    }
  },
  props: ['allCart'],
  watch: {
    allCart: function (newVal, oldVal) {
      this.array = newVal
      this.renderline()
    }
  },
  methods: {
    renderline() {
      const myPieChart = echarts.init(document.getElementById('daily'))
      const name = this.array.map(item => item.name)
      const value = this.array.map(item => item.value)

      const pieOption = {
        // 鼠标移入的提示
        tooltip: {
          trigger: 'axis'
        },
        // 网格
        grid: {
          top: '10%',
          right: '4%',
          bottom: '3%',
          left: '3%',
          // show: true, // 显示网格的边框
          containLabel: true // 网格包括坐标轴的文字
          // borderColor: '#012f4a'
        },
        xAxis: {
          type: 'category',
          barWidth: '60%',
          data: name,
          // data: name,
          // 去除轴线
          axisLine: {
            show: true
          },
          // 刻度设置
          axisTick: {
            // 不显示刻度
            show: false
          },
          // 文字调整
          axisLabel: {
            color: '#4c9bfd' // x轴文字颜色
          },
          splitLine: {
            show: false
          }
          // 两边的留白策略
          // boundaryGap: false
        },
        yAxis: {
          type: 'value',
          // 去除轴线
          axisLine: {
            show: true
          },
          // 文字调整
          axisLabel: {
            color: '#4c9bfd' // x轴文字颜色
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
          // Y轴分割线（图表中的哪些横线）
          splitLine: {
            show: false
          }
        },
        // 图例（图例和series中的数据有关系，保证series中的数据有 name 才行）
        // legend: {
        //   textStyle: {
        //     color: '#4c9bfd' // 图例文字颜色
        //   },
        //   right: '45%' // 距离右边10%
        // },
        color: ['#1fabcf'],
        series: [
          {
            name: '车源量',
            type: 'bar',
            // barCategoryGap: '-130%',
            // symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            // label: {
            itemStyle: {
              opacity: 1,
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: '#4c9bfd',
                    fontSize: 14
                  }
                }
              }
            },
            emphasis: {
              itemStyle: {
                opacity: 0.5
              }
            },
            data: value,
            z: 10
          }
        ]
      }

      myPieChart.setOption(pieOption)
    }
  }
}
</script>
<style lang="less" scoped>
#daily {
  width: 100%;
  height: 100%;
}
</style>
